<template>
  <div class="rule dfsp">
    <div class="rule_list">
      <div class="title">{{ t('setting') }}</div>
      <div class="list">
        <div class="item dfsp">
          <text>{{ t('lang') }}</text>
          <el-dropdown class="my_dropdown">
            <text class="lang">
              <text v-if="langtex == 'zh'">简体</text>
              <text v-if="langtex == 'zhtw'">繁體</text>
              <!-- <text v-if="langtex == 'nogu'">Tiếng Việt</text> -->
              <el-icon style="margin-left: 10px">
                <ArrowDownBold />
              </el-icon>
            </text>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in LangList"
                  :key="index"
                  @click.native="toggle(item.code)"
                >
                  {{ item.title }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="item dfsp" @click.native="logout">
          <text class="munename">{{ t('outlogin') }}</text>
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="rule_detail">
      <img src="/src/style/img/payment_bg.png" alt="" />
    </div>

    <el-dialog
      v-model="dialogVisible"
      title=""
      width="35%"
      center
      close-on-press-escape="false"
      close-on-click-modal="false"
      before-close="closeDialog"
      close-icon=""
    >
      <span>
        <img src="/src/style/img/setting/logout.png" alt="" />
        <div class="outlogin-text">{{ t('outlogin') }}</div>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose"> {{ t('cancel') }} </el-button>
          <el-button type="primary" @click="comfirmLogOut"> {{ t('exit') }} </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { setToken } from '../../utils/cookies.js'
import { ElLoading, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore() //vuex
import { ArrowRightBold, ArrowDownBold } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import Cookies from 'js-cookie'
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance()
// 语言
const LangList = reactive([
  {
    title: t('zh'),
    code: 'zh',
  },
  {
    title: t('zhtw'),
    code: 'zhtw',
  },
  // {
  // 	title: t('nogu'),
  // 	code: 'nogu'
  // },
])

// 退出登录弹窗
const dialogVisible = ref(false)
const dialogClose = () => {
  dialogVisible.value = false
}
const comfirmLogOut = () => {
  dialogVisible.value = false
  store.dispatch('LOGOUT')
  router.push('/login')
  location.reload()
}

const { locale: i18nLanguage } = useI18n()

const langtex = computed(() => {
  return Cookies.get('Lang') || 'zh'
})

const toggle = (languageKey) => {
  i18nLanguage.value = languageKey
  store.state.Lang = languageKey
  Cookies.set('Lang', languageKey)
  location.reload()
}
// 退出登录
const logout = () => {
  dialogVisible.value = true
  // ElMessageBox.alert(t('outlogin'), t('tip'), {
  //   confirmButtonText: t('confirm'),
  //   callback: (action) => {
  //     if (action == 'confirm') {
  //       store.dispatch('LOGOUT')
  //       router.push('/login')
  //       location.reload()
  //     }
  //   },
  // })
}
</script>

<style scoped lang="scss">
@import '../../style/scss/setting';
</style>
